<template>
  <div class="situation-box">
    <!-- 搜索表单 -->
    <div class="search-box">
        <el-input
            placeholder="姓名"
            v-model="searchForm.userName"
        ></el-input>
        <el-input
            placeholder="手机号"
            v-model="searchForm.phone"
        ></el-input>
        <el-select v-model="searchForm.roleId" placeholder="请选择">
            <el-option :label="exam.roleName" :value="exam.roleId" v-for="exam in examRoleList" :key="exam.roleId"></el-option>
        </el-select>
        <el-select v-model="searchForm.status" placeholder="请选择">
            <el-option label="未通过" value="-1"></el-option>
            <el-option label="未开始" value="0"></el-option>
            <el-option label="已通过" value="1"></el-option>
            <el-option label="再次学习" value="2"></el-option>
        </el-select>
        <el-button type="primary" class="addBtn" round @click="clickSearch">搜索</el-button>
        <el-button class="elBtn" round @click="reset">重置</el-button>
    </div>
    <!-- 表格 -->
    <el-table
        :data="situationData"
        style="width: 100%">
        <el-table-column
            prop="userName"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号">
        </el-table-column>
        <el-table-column
            prop="roleName"
            label="角色">
        </el-table-column>
        <el-table-column
            prop="score"
            label="学习成绩">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态">
            <template slot-scope="scope">
                <p>{{getStudyingBtnTxt(scope.row.status)}}</p>
            </template>
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="考试时间">
        </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageing.total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import {getExamResultListByExamApi} from "@/wss/newApi_3-24/assess/question.js"
import {getExamRoleListApi} from "@/wss/newApi_3-24/assess/exam.js"
export default {
    name:'condition',
    props:{
        selectExam:{
            type: Object
        }
    },
    data(){
        return{
            // 分页
            pageing: { pageNum: 1, pageSize: 10, total: 0 },

            // 搜索表单
            searchForm:{
                userName:'',
                phone:'',
                roleId: '',
                status: '',
            },

            situationData: [],// 学习情况列表
            examRoleList: [],//学习角色列表
        }
    },
    mounted(){
        this.getExamResultListByExam()// 获取学习情况列表
        this.getExamRoleList()// 获取学习角色列表
    },
    watch:{
        selectExam(newVal,oldVal){
            this.getExamResultListByExam()// 获取学习情况列表
            this.getExamRoleList()// 获取学习角色列表
        }
    },
    methods:{
        // 获取学习情况列表
        async getExamResultListByExam(){
            let params = {
                pageNum: this.pageing.pageNum,
                pageSize: this.pageing.pageSize,
                examId: this.selectExam.id,
                userName: this.searchForm.userName,
                phone: this.searchForm.phone,
                roleId: this.searchForm.roleId,
                status: this.searchForm.status,
            }
            let result = await getExamResultListByExamApi(params)
            if(result.code==200){
                this.situationData = result.rows
                this.pageing.total = result.total
            }
        },

        // 获取学习角色列表
        async getExamRoleList(){
            let result = await getExamRoleListApi()
            if(result.code==200){
                this.examRoleList = result.rows
            }
        },

        // 点击搜索按钮
        clickSearch(){
            this.getExamResultListByExam() //获取学习情况列表
        },

        // 点击重置按钮
        reset(){
            this.searchForm = {
                userName:'',
                phone:'',
                roleId: '',
                status: '',
            }
            this.getExamResultListByExam() //获取学习情况列表
        },

        // 分页器 一页多少条
        handleSizeChange(val){
            this.pageing.pageSize = val
            this.getExamResultListByExam() //获取学习情况列表
        },

        // 分页器 当前第几页
        handleCurrentChange(val){
            this.pageing.pageNum = val
            this.getExamResultListByExam() //获取学习情况列表
        },

        // 判断状态
        getStudyingBtnTxt(status){
            // 状态 1通过 -1未通过 0未开始 2继续学习
            const stateMap = {
                '-1': "未通过",
                0: "未开始",
                1: "已通过",
                2: "再次学习",
            };
            return stateMap[status];
        },
    },
}
</script>

<style scoped lang="scss">
    .situation-box{
        padding: 0 20px;
    }

    // 搜索
    .search-box{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 15px;
        .el-select,
        .el-input{
            width: 120px;
            margin-right: 10px;
        }
        .el-button{
            height: 30px;
            line-height: 30px;
            padding: 0px 15px;
            background-color: #fff;
            border: 1px solid #ecedf0;
        }
        .addBtn{
            background-color: #f87a23;
            border-color: #f87a23;
            color: #fff;
        }
    }

    // 分页
    .pagination{
        text-align: center;
        margin-top: 15px;
    }
</style>